<template>
  <div class="container">
    <div class="app-container">
      <div class="main">
        <el-button type="primary" class="btn" @click="add">添加工作模式</el-button>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" align="center" label="工作模式编号" />
          <el-table-column prop="name" align="center" label="工作模式" />
          <el-table-column prop="workPatternType" align="center" label="类型" />
          <el-table-column prop="workDate" align="center" label="工作日期" width="250" />
          <el-table-column prop="workMinute" align="center" label="工作时间" />
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <el-button size="mini" type="text" style="margin-right:5px" @click="edit(row.id)">编辑</el-button>|
              <el-popconfirm title="确定要删除这个工作模式吗删除吗？" @onConfirm="del(row.id)">
                <el-button slot="reference" size="mini" type="text" style="color:red">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange" />
        </el-row>
      </div>

      <!-- 添加模式弹框 -->
      <el-dialog
        title="新增工作模式"
        :visible.sync="visible"
        width="45%"
      >
        <el-row type="flex" justify="center">
          <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-tabs v-model="formData.workPatternType" style="width:90%" @tab-click="handleClick">
              <el-tab-pane label="礼拜制" name="1">

                <el-form-item label="工作名称" prop="name">
                  <el-input v-model="formData.name" placeholder="请填写工作模式名称" />
                </el-form-item>

                <el-form-item label="连续天数" prop="workNum">
                  <el-checkbox-group v-model="formData.workNum">
                    <el-checkbox label="周一" name="monday" />
                    <el-checkbox label="周二" name="tuesday" />
                    <el-checkbox label="周三" name="wednesday" />
                    <el-checkbox label="周四" name="thursday" />
                    <el-checkbox label="周五" name="friday" />
                    <el-checkbox label="周六" name="saturday" />
                    <el-checkbox label="周日" name="sunday" />
                  </el-checkbox-group>
                  <div>选中为工作时间，未选中为休息时间</div>
                </el-form-item>

                <el-form-item label="工作时间">
                  <el-time-picker
                    v-model="formData.workStartMinute1"
                    placeholder="起始时间"
                    :value-format="pickerFormatText"
                    :format="pickerFormatText"
                    :picker-options="{
                      selectableRange: '08:00:00 - 23:59:00',
                      format: pickerFormatText
                    }"
                    @change="changeTime1"
                  />
                  <span>-</span>
                  <el-time-picker
                    v-model="formData.workEndMinute1"
                    placeholder="结束时间"
                    :value-format="pickerFormatText"
                    :format="pickerFormatText"
                    :picker-options="{
                      selectableRange: `${minPickerTime} - 23:59:00`,
                      format: pickerFormatText
                    }"
                    @change="changeTime2"
                  />
                </el-form-item>
              </el-tab-pane>

              <el-tab-pane label="连续制" name="2">
                <el-form-item label="工作名称" prop="name">
                  <el-input v-model="formData.name" placeholder="请填写工作模式名称" />
                </el-form-item>

                <el-form-item label="连续天数">
                  上&nbsp;&nbsp;
                  <el-input v-model="formData.workDayNum" style="width:80px;margin-right:10px" placeholder="请输入" />
                  休&nbsp;&nbsp;
                  <el-input v-model="formData.restDayNum" style="width:80px" placeholder="请输入" />
                </el-form-item>

                <el-form-item label="工作时间">
                  <el-time-picker
                    v-model="value1"
                    is-range
                    format="HH:mm"
                    range-separator="至"
                    start-placeholder="起始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    @change="timeChange"
                  />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </el-row>

        <el-row type="flex" justify="center">
          <el-button type="primary" style="background: #e15536;width: 90px;border:0px" @click="addBtn">确认</el-button>
          <el-button style="width: 90px;" @click="visible = false">取消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { addArrangeWorkAPI, arrangeWorkAPI, delArrangeWorkAPI } from '@/api/employee'
export default {
  name: 'ArrangeSet',
  data() {
    return {
      tableData: [],
      total: 1,
      pageCount: {
        page: 1,
        pageSize: 10
      },
      workType: [
        { id: 1, value: '礼拜制' },
        { id: 2, value: '连续制' }
      ],
      workMinute: [],
      visible: false,
      formData: {
        workPatternType: '1',
        name: '',
        workNum: [],
        workMinute: '',
        workEndMinute1: 0,
        workStartMinute1: 0,
        monday: 2,
        tuesday: 2,
        wednesday: 2,
        thursday: 2,
        friday: 2,
        saturday: 2,
        sunday: 2,
        workDayNum: '',
        restDayNum: ''
      },
      minPickerTime: '08:00:00',
      pickerFormatText: 'HH:mm',
      rules: {
        name: [
          { required: true, message: '工作模式名称不能为空', trigger: 'blur' }
        ],
        workNum: [
          { required: true, message: '请选择连续工作天数', trigger: 'change' }
        ]
      },
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formData.resetFields()
        this.formData = {
          workPatternType: '1',
          name: '',
          workNum: [],
          workMinute: '',
          workEndMinute1: null,
          workStartMinute1: null,
          monday: 2,
          tuesday: 2,
          wednesday: 2,
          thursday: 2,
          friday: 2,
          saturday: 2,
          sunday: 2,
          workDayNum: '',
          restDayNum: ''
        }
      }
    }
  },
  created() {
    this.arrangeWork()
  },
  methods: {
    async arrangeWork() {
      const res = await arrangeWorkAPI(this.pageCount)
      this.total = +res.data.data.counts
      this.tableData = res.data.data.items
      this.tableData.forEach(value => {
        const time = ((value.workEndMinute1 - value.workStartMinute1) / 60).toFixed(2)
        // 给数组列表 动态添加新属性并赋值
        value.workMinute = time

        this.workType.forEach(item => {
          if (value.workType === item.id) {
            value.workType = item.value
          }
        })
      })
    },
    pageChange(page) {
      this.pageCount.page = page
      this.arrangeWork()
    },
    async del(id) {
      const res = await delArrangeWorkAPI(id)
      if (res.data.code === 1) {
        this.$message.error(res.data.msg)
        return
      }
      this.arrangeWork()
      this.$message.success('删除工作模式成功')
    },
    add() {
      this.visible = true
      this.formData.workPatternType = '1'
    },
    handleClick(value) {
      this.formData.workPatternType = value.name
    },
    changeTime1(event) {
      this.minPickerTime = `${event}:00`

      this.formData.workStartMinute1 = parseInt(+event.substr(0, 2) * 60 + event.substr(-1, 2))
    },
    changeTime2(event) {
      this.minPickerTime = `${event}:00`

      this.formData.workEndMinute1 = parseInt(+event.substr(0, 2) * 60 + event.substr(-1, 2))
    },
    timeChange(data) {
      this.formData.workStartMinute1 = parseInt(String(data[0]).substr(16, 2)) * 60 + parseInt(String(data[0]).substr(19, 2))
      this.formData.workEndMinute1 = parseInt(String(data[1]).substr(16, 2)) * 60 + parseInt(String(data[1]).substr(19, 2))
    },
    async addBtn() {
      this.formData.workNum.forEach(item => {
        if (item === '周一') this.formData.monday = 1
        if (item === '周二') this.formData.tuesday = 1
        if (item === '周三') this.formData.wednesday = 1
        if (item === '周四') this.formData.thursday = 1
        if (item === '周五') this.formData.friday = 1
        if (item === '周六') this.formData.saturday = 1
        if (item === '周日') this.formData.sunday = 1
      })

      delete this.formData.workNum
      const res = await addArrangeWorkAPI(this.formData)
      if (res.data.code === 200) {
        this.$message.success('添加模式成功')
        this.visible = false
        this.formData.workNum = []
        this.arrangeWork()
      }
    },
    async edit(id) {
      this.visible = true
      // const res = await arrangeWorkDetailAPI(id)
      // this.formData = res.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  margin-top: 20px;
  background-color: #fff;
  padding: 28px;
}
.btn{
  height: 40px;
    background: #e15536;
    border-radius: 4px;
    border-color: transparent;
    padding: 9px 0px;
    margin-bottom: 20px;
    width: 120px;
}
</style>
